<template>
  <div class="car-table">
    <el-input placeholder="请输入车牌号" v-model="searchText" class="search-box" :class="{dialogSence: tableScene===2}">
      <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
    </el-input>
    <!-- :header-row-style="setHeaderClass" 修改头部样式 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      :height="tableHeight"
      border
      v-loading="loading"
      element-loading-text="数据加载中..."
      highlight-current-row
      @cell-click="onCellClick"
      :empty-text="emptyText"
      @selection-change="onSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        align="center"
        header-align="center"
        width="36"
        v-if="showSelection">
      </el-table-column>
      <!-- <el-table-column
        prop="status"
        label="类型"
        width="60"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <i :class="getCarStatusIcon(scope.row.status)"></i>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="vecNo"
        label="车牌号"
        align="center"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="80"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <span :class="{oncar:scope.row.state==1,offcar:scope.row.state==0}">{{ getCarStatus(scope.row.state) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="showSelection"
        prop="opt"
        label="操作"
        width="80"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openLockDialog(scope.row.vecNo)">开锁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="limit"
      :current-page="currentPage"
      :total="total"
      small
      layout="total, prev, next, jumper"
      @current-change="onCurrentChange">
    </el-pagination>
    <el-dialog
      title="开锁"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form  label-width="120px">
        <el-form-item label="锁号" prop="lockCode">

          <el-checkbox-group
            v-model="lockCodes">
            <el-checkbox v-for="item in  lockDatas" :label="item.lockCode" :key="item.lockCode">{{item.lockCode}}</el-checkbox>
          </el-checkbox-group>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="openLockSubmit()">确定</el-button>
    </span>
    </el-dialog>
  </div>


</template>

<script>
import {getCarList,queryDeviceByVecNo,openLock} from '@/api/mapMonit'
export default {
  name: 'car-table',
  // props定义的数据无法在computed访问返回undefined，可以在mounted时期通过this访问
  props: {
    showSelection: { // 表格是否增加单选框
      type: Boolean,
      default: false
    },
    tableScene: { // 1表示地图场景，2表示窗口打开场景
      type: Number,
      default: 1
    },
    fenceId: Number
  },
  data() {
    return {
      tableData: [],
      currentPage: 1, // 当前页索引
      limit: 10, // 每页大小 固定
      total: 0, // 总数
      searchText: '',
      lockDatas: [],
      lockCodes: [],
      emptyText: ' ',
      loading: false,
      visible: false,
      tableHeight: null
    }
  },
  mounted() {
    setTimeout(() => {
      this._getCarList()
      this.setTableHeight(this.tableScene)
    },20)
  },
  // computed:{
  //   tableHeight: ()=>{
  //     let tableHeight = 0
  //     console.log(this.tableScene)
  //     if(this.tableScene === 1){
  //       tableHeight = window.innerHeight - (60+20+40+34+32)
  //     }else if(this.tableScene === 2){
  //       tableHeight = 500
  //     }
  //     return tableHeight
  //   }
  // },
  methods: {
    setTableHeight(sence){ // sence：1表示地图场景，2表示窗口打开场景
      if(sence === 1){
        this.tableHeight = document.body.scrollHeight - (85+20+34+32-4)
        this.limit = 15
      }else if(sence === 2){
        this.tableHeight = null
        this.limit = 10
      }
    },
    openLockSubmit(){
      if(this.lockCodes.length==0){
        this.$message({
          message: '请选择锁',
          type: 'error'
        })
      }
      openLock(this.lockCodes.join(",")).then(res => {
        this.visible =true
        if(res.code == 0){
          this.$message({
            message: '开锁成功！',
            type: 'success'
          })
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    openLockDialog(vecNo) {
      queryDeviceByVecNo(vecNo).then(res => {
        this.visible =true

        if(res.code == 0){
          this.lockDatas = res.data
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })

    },
    _getCarList() {
      this.loading = true
      this.tableData = []
      let rules = []
      rules.push({"field":"vec_no","op":"cn","data":this.searchText.trim()});
      rules.push({"field":"vec_no","op":"unlike","data":"挂"});
      var filters = {"groupOp":"AND","rules":rules};
      var params = {
        filters: filters, // 围栏号
        page: this.currentPage, // 当前页索引
        limit: this.limit // 每页大小
      };
      getCarList(params).then(res => {
        let page = res.page
        if(res.code == 0){
          this.tableData = [...page.list]
          this.currentPage = page.currPage
          this.limit = page.pageSize
          this.total = page.totalCount
        }else{
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
        this.loading = false
        this.emptyText = this.tableData.length ? ' ' : '暂无数据'
      })
    },
    // getCarStatusIcon(status) {
    //   return `car-status-icon car-status-icon${status}`
    // },
    getCarStatus(status){
    //  return status == 1 ? '在线' : '离线'
      return '在线'
    },
    // 表格单元格选中事件
    onCellClick(row, column, cell, event){
      this.$emit("onCarTableCellClick", row, column, cell, event)
    },
    // 表格单选框选中事件
    onSelectionChange(val){
      this.$emit("onCarTableSelection", val)
    },
    onSearch(){
      if(this.currentPage === 1){
        this._getCarList()
      }else{
        this.currentPage = 1 // 通过改变页数来触发事件加载数据
      }
    },
    onCurrentChange(page){
      this.currentPage = page
      this._getCarList()
    },
    // 设置表格头部样式
    // setHeaderClass({row, rowIndex}){
    //   return {'color':'red','font-size':'14px','background':'red'}
    // }
  }
}
</script>

<style scoped lang="less">
  .car-table{
    height: 100%;
    .search-box{
      // padding: 1px 0;
    }
    .dialogSence{
      width: 40%;
      padding-bottom: 5px;
    }
    .el-table{
      .oncar{
        color: #2578f9;
      }
      .offcar{
        color: #fd3737;
      }
      .car-status-icon{
        display: inline-block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 10px;
        left: 20px;
      }
      .car-status-icon1{
        background: url('../common/images/status/run.png') no-repeat;
      }
      .car-status-icon2{
        background: url('../common/images/status/stop.png') no-repeat;
      }
      .car-status-icon3{
        background: url('../common/images/status/online.png') no-repeat;
      }
      .car-status-icon4{
        background: url('../common/images/status/offline.png') no-repeat;
      }
      .car-status-icon5{
        background: url('../common/images/status/alarm.png') no-repeat;
      }
      .car-status-icon6{
        background: url('../common/images/status/unuse.png') no-repeat;
      }
    }
    .el-pagination{
      text-align: right;
    }
  }
</style>
